<template>
  <el-dialog v-model="visible" :title="'批量修改'" :close-on-click-modal="false" width="1200">
    <div class="flex">
      <div>
        <ma-org-select v-model="queryForm.deptId" placeholder="请选择" @change="getDataList"></ma-org-select>
        <el-table
          v-loading="loading"
          border
          :data="dataList"
          height="400"
          style="width: 100%"
          @selection-change="selectionChangeHandle">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column
            prop="imei"
            label="设备序号"
            header-align="center"
            align="center"
            width="100"></el-table-column>
          <el-table-column
            prop="protocol"
            label="通信协议"
            header-align="center"
            align="center"
            width="100"></el-table-column>
          <el-table-column
            prop="platformStartDate"
            label="添加时间"
            header-align="center"
            align="center"
            width="100"></el-table-column>
          <el-table-column
            prop="platformEndDate"
            label="平台到期时间"
            header-align="center"
            align="center"
            width="100"></el-table-column>
        </el-table>
        <el-pagination
          :current-page="queryForm.pageNum"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="queryForm.pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle">
        </el-pagination>
      </div>
      <el-button type="primary" icon="DArrowRight" circle style="margin: auto 0" @click="goRight()" />
      <el-button type="primary" icon="DArrowLeft" circle style="margin: auto 0" @click="goLeft()" />
      <div>
        <ma-org-select v-model="transferID" placeholder="请选择"></ma-org-select>
        <el-table
          v-loading="loading"
          border
          :data="transferDataList"
          height="400"
          style="width: 100%"
          @selection-change="selectionChangeHandle">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column
            prop="imei"
            label="设备序号"
            header-align="center"
            align="center"
            width="100"></el-table-column>
          <el-table-column
            prop="protocol"
            label="通信协议"
            header-align="center"
            align="center"
            width="100"></el-table-column>
          <el-table-column
            prop="platformStartDate"
            label="添加时间"
            header-align="center"
            align="center"
            width="100"></el-table-column>
          <el-table-column
            prop="platformEndDate"
            label="平台到期时间"
            header-align="center"
            align="center"
            width="100"></el-table-column>
        </el-table>
        <el-button type="primary" style="float: right; margin: 20px" @click="submitHandle">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { deviceListPageApi, transmitChangesApi } from '@/api/gps/device'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const transferDataList = ref()
const loading = ref(false)
const dataList = ref()
const data = ref()
const total = ref(0)
const transferID = ref()
const queryForm = reactive({
  pageNum: 1,
  pageSize: 10,
  deptId: undefined
})

const init = () => {
  visible.value = true
  transferID.value = null
  transferDataList.value = []
  getDataList()
}
//获取列表
function getDataList() {
  deviceListPageApi(queryForm).then((res) => {
    dataList.value = res.data.list
    total.value = res.data.totalCount
  })
}
//请求列表数据条数
function sizeChangeHandle(val) {
  queryForm.pageNum = 1
  queryForm.pageSize = val
  getDataList()
}

function currentChangeHandle(val) {
  queryForm.pageNum = val
  getDataList()
}
//获取要移动列表
function selectionChangeHandle(selections) {
  data.value = []
  // console.log(selections)
  data.value = data.value.concat(selections)
  // console.log(data.value)
}

function goRight() {
  move(dataList, data, transferDataList)
}
function goLeft() {
  move(transferDataList, data, dataList)
}
//列表移动
function move(data1, data2, data3) {
  data1.value = data1.value.filter((item) => {
    for (const item2 of data2.value) {
      if (item.id === item2.id) {
        return false
      }
    }
    return true
  })

  if (!data3.value) {
    data3.value = data2.value
    return
  }

  data3.value = data3.value.filter((item) => {
    for (const item2 of data2.value) {
      if (item.id === item2.id) {
        return false
      }
    }
    return true
  })

  data3.value.push(...data2.value)
}
//提交
function submitHandle() {
  if (!transferDataList.value.length) {
    ElMessage.error({
      message: '请选择设备'
    })
    return
  }
  if (!transferID.value) {
    ElMessage.error({
      message: '请选择公司'
    })
    return
  }
  transmitChangesApi({
    deptId: transferID.value,
    deviceEntities: transferDataList.value
  }).then(() => {
    ElMessage.success({
      message: '操作成功',
      onClose() {
        visible.value = false
        emit('refreshDataList')
      }
    })
  })
}

defineExpose({
  init
})
</script>

<style scoped>
.item_line {
  display: flex;
}
.item_line > div {
  flex: 1;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
